﻿<UserControl x:Class="Gallery.PivotControl.PivotControlView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:apexControls="clr-namespace:Apex.Controls;assembly=Apex"
             mc:Ignorable="d" 
             d:DesignHeight="600" d:DesignWidth="800">

    <Grid Style="{StaticResource GalleryItemStyle}">

        <apexControls:PaddedGrid Rows="Auto,Auto,*,Auto" Padding="4">

            <!-- Title section. -->
            <TextBlock Grid.Row="0" Style="{StaticResource Heading1}">PIVOTCONTROL</TextBlock>
            <TextBlock Grid.Row="1" Style="{StaticResource Subtitle}">
            The PivotControl emulates a Windows Phone style Pivot.
            These Pivots work in a similar way to tab controls.
            Typically, Pivots take up a large area of user interface, in this a blue border is drawn around the element
            showing how it works.
            </TextBlock>

            <!-- Sample zone. -->
            <Grid Row="2" Margin="16" MaxWidth="600" MaxHeight="800">
                <Border BorderBrush="#3434ed" BorderThickness="1" Padding="4">

                    <!-- Second section, the pivot control. -->
                    <apexControls:PivotControl 
            x:Name="pivotControl"
            Grid.Row="1" VerticalAlignment="Top" HorizontalAlignment="Center" Width="600">
                        <apexControls:PivotItem Title="Item 1" IsSelected="True">
                            <TextBlock Text="This is the first item." />
                        </apexControls:PivotItem>
                        <apexControls:PivotItem Title="Item 2">
                            <TextBlock Text="This is the second item." />
                        </apexControls:PivotItem>
                    </apexControls:PivotControl>

                </Border>

            </Grid>
        </apexControls:PaddedGrid>
    </Grid>
</UserControl>
